<template>
  <div class="colorbar-container">
    <!-- 颜色条 -->
    <div class="colorbar-segments">
      <div
        v-for="(color, index) in colorSegments"
        :key="index"
        class="color-segment"
        :style="{
          background: color.value,
          height: segmentHeight,
        }"
      ></div>
    </div>
    <!-- 刻度标签 -->
    <div class="colorbar-labels">
      <span
        v-for="(label, index) in labels"
        :key="index"
        class="label"
        :style="labelStyle(index)"
      >
        {{ label }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  colors: {
    type: Array,
    default: () => ["#0000FF", "#00FF00", "#FFFF00", "#FF0000"],
  },
  min: {
    type: Number,
    default: 0,
  },
  max: {
    type: Number,
    default: 100,
  },
  labelCount: {
    type: Number,
    default: 5,
  },
});

// 计算每个颜色分段对应的值范围
const colorSegments = computed(() => {
  const segmentCount = props.colors.length;
  const step = (props.max - props.min) / segmentCount;
  return props.colors.map((color, i) => ({
    value: color,
    minValue: props.min + i * step,
    maxValue: props.min + (i + 1) * step,
    position: ((i + 0.5) / segmentCount) * 100, // 颜色段中心位置
  })); // 倒序显示
});

// 计算标签位置（对齐到颜色分段中心）
const labels = computed(() => {
  const segmentCount = props.colors.length;
  return Array.from({ length: props.labelCount }, (_, i) => {
    const pos = i / (props.labelCount - 1); // 0到1的位置
    const segmentIndex = Math.min(
      Math.floor(pos * segmentCount),
      segmentCount - 1
    );
    const segment = colorSegments.value[segmentIndex];
    const value = props.min + (props.max - props.min) * pos;
    return value.toFixed(5);
  });
});

// 每个颜色分段的高度
const segmentHeight = computed(() => `${100 / props.colors.length}%`);

// 标签样式（精确对齐颜色分段中心）
const labelStyle = (index) => {
  const pos = index / (props.labelCount - 1);
  const segmentIndex = Math.min(
    Math.floor(pos * props.colors.length),
    props.colors.length - 1
  );
  const percentage = ((segmentIndex + 0.5) / props.colors.length) * 100;

  return {
    left: "20px",
    bottom: `${percentage}%`,
    transform: "translateY(50%)",
  };
};
</script>

<style scoped>
.colorbar-container {
  position: absolute;
  bottom: 50px;
  right: 17%;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.colorbar-segments {
  display: flex;
  flex-direction: column-reverse;
  width: 14px;
  height: 200px;
  border-radius: 4px;
  margin-right: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.color-segment {
  width: 100%;
  transition: height 0.3s ease;
}

.colorbar-labels {
  position: relative;
  height: 200px;
  min-width: 60px;
}

.label {
  position: absolute;
  font-size: 12px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  text-align: left;
}
</style>
